<template>
  <div class="bnh-bind-container">
      <div class="bnh-bind-item border flex flex-align-center">
        <img src="@/assets/img/forget-tel.png" alt="">
        <input type="number" placeholder="输入您的旧手机号" v-model='phone'>
        <div class="bnh-getCode flex flex-align-center flex-pack-center" :class='{active:isGetCode1}' @click="getCode1"><p>{{erCodeId1}}</p></div>
     </div>
     <div class="bnh-bind-item border flex flex-align-center">
        <img src="@/assets/img/forget-ercode.png" alt="">
        <input type="number" placeholder="请输入验证码" v-model="verifyCode">
     </div>
     <div class="bnh-bind-item border flex flex-align-center">
        <img src="@/assets/img/forget-tel.png" alt="">
        <input type="number" placeholder="输入您的新手机号" v-model="newPhone">
        <div class="bnh-getCode flex flex-align-center flex-pack-center" :class='{active:isGetCode2}' @click="getCode2"><p>{{erCodeId2}}</p></div>
     </div>
     <div class="bnh-bind-item border flex flex-align-center">
        <img src="@/assets/img/forget-ercode.png" alt="">
        <input type="number" placeholder="请输入验证码" v-model='newPhoneVerifyCode'>
     </div>
    <div class="bnh-login-btn flex flex-align-center flex-pack-center" @click="modify">
        <p>确认</p>
    </div>
  </div>
</template>
<script>
import http from '../utils/http'
import api from '../utils/api'
import utils from '../utils/utils'
export default {
  created(){ //页面初始化时修改网页标题
			window.document.title = '绑定新手机';
    },
  data(){
    return{
      phone:'', //旧手机
      newPhone:'', //新手机
      verifyCode:'', //旧手机验证码
      newPhoneVerifyCode:'', //新手机验证码
      erCodeId1:'获取验证码', //获取验证码按钮
      isCode1:true, //获取验证码按钮状态
      erCodeId2:'获取验证码', //获取验证码按钮
      isCode2:true, //获取验证码按钮状态
    }
  },
  methods:{
    // 获取验证码
			getCode1: async function(){
				let _this = this;
                if(_this.isGetCode1){
                    let params = { phone: _this.phone}
                    const res = await http.get(api.sendSms, params);
                    	if (res.data.success) {
                                   _this.$vux.toast.text('验证码已发送', 'middle');
                                    let num = 60;
                                    let timer = setInterval(function () {
                                    num--;
                                    _this.isCode1 = false;
                                    _this.erCodeId1 = `${num}s`;
                                    if (num === 0) {
                                        _this.isCode1 = true;
                                        _this.erCodeId1 = `重新获取`;
                                        clearInterval(timer);
                                    }
                                }, 1000);
							}else{
                     this.$vux.toast.text(res.data.message, 'middle');
                    }
                }
      },
    	getCode2: async function(){
				let _this = this;
                if(_this.isGetCode2){
                    let params = { phone: _this.newPhone}
                    const res = await http.get(api.sendSms, params);
                    	if (res.data.success) {
                                   _this.$vux.toast.text('验证码已发送', 'middle');
                                    let num = 60;
                                    let timer = setInterval(function () {
                                    num--;
                                    _this.isCode2 = false;
                                    _this.erCodeId2 = `${num}s`;
                                    if (num === 0) {
                                        _this.isCode2 = true;
                                        _this.erCodeId2 = `重新获取`;
                                        clearInterval(timer);
                                    }
                                }, 1000);
							}else{
                     this.$vux.toast.text(res.data.message, 'middle');
                    }
                }
      },
      modify: async function(){ //提交修改信息
          if(this.phone =='' || this.newPhone == '' || this.verifyCode=='' || this.newPhoneVerifyCode==''){
            this.$vux.toast.text('请填写完整信息', 'middle');
          }else{
            if(this.phone == this.newPhone){
               this.$vux.toast.text('两次手机号不能相同', 'middle');
            }else{
              let params = {phone:this.phone,newPhone:this.newPhone,verifyCode:this.verifyCode,newPhoneVerifyCode:this.newPhoneVerifyCode}
              const res = await http.post(api.bindPhoneByPhone, params);
              if (res.data.success) {
                  this.$vux.toast.text('修改成功', 'middle');
				}else{
                  this.$vux.toast.text(res.data.message, 'middle');
              }
            }
          }
      },
  },
    computed:{
        isGetCode1:{
            get:function(){
                if(utils.isPoneAvailable(this.phone)){
                    return this.isCode1;
                }else{
                    return  false;
                }
            }
        },
         isGetCode2:{
            get:function(){
                if(utils.isPoneAvailable(this.newPhone)){
                    return this.isCode2;
                }else{
                    return  false;
                }
            }
        },
    },
}
</script>
<style scoped>
.bnh-bind-container{padding: 0 0.28rem}
.bnh-bind-item{height: 1.2rem;}
.bnh-bind-item img{width: 0.37rem;height: auto;margin-left: 0.1rem;}
.bnh-bind-item input{width: 4rem;margin-left: 0.2rem;padding-left: 0.1rem;border:none}
.bnh-getCode{height: 0.6rem;width: 1.8rem;border-radius: 15px;background: #ccc;color: #fff;text-align: center;font-size: 0.28rem;line-height: 0.6rem;margin-left: 0.2rem}
.bnh-login-btn{height: 0.95rem;width: 7rem;margin: 0 auto;border-radius: 25px;background: #ffaf3c;color: #fff;font-size: 0.32rem;margin-top: 0.66rem}
.active{background: #ffaf3c}
</style>

